<template>
  <!-- 新增部门的弹层 -->
  <el-dialog :title="title" :visible="dialogShow" :before-close="handleClose" @close="btnCancel">
    <!-- 表单组件  el-form   label-width设置label的宽度   -->
    <!-- 匿名插槽 -->
    <el-form v-if="title === '新增部门'" ref="deptForm" :model="formData" label-width="120px" :rules="rules">
      <el-form-item label="部门名称" prop="name">
        <el-input v-model="formData.name" style="width:80%" placeholder="1-50个字符" />
      </el-form-item>
      <el-form-item label="部门编码" prop="code">
        <el-input v-model="formData.code" style="width:80%" placeholder="1-50个字符" />
      </el-form-item>
      <el-form-item label="部门负责人" prop="manager">
        <el-select v-model="formData.manager" style="width:80%" placeholder="请选择" @focus="getEmployeeSimple" @blur="checkManager">
          <el-option v-for="item in employeeSimple" :key="item.id" :label="item.username" :value="item.username" />
        </el-select>
      </el-form-item>
      <el-form-item label="部门介绍" prop="introduce">
        <el-input v-model="formData.introduce" style="width:80%" placeholder="1-300个字符" type="textarea" :rows="3" />
      </el-form-item>
    </el-form>
    <el-form v-else ref="deptForm" :model="detail" label-width="120px" :rules="rules">
      <el-form-item label="部门名称" prop="name">
        <el-input v-model="detail.name" style="width:80%" placeholder="1-50个字符" />
      </el-form-item>
      <el-form-item label="部门编码" prop="code">
        <el-input v-model="detail.code" style="width:80%" placeholder="1-50个字符" />
      </el-form-item>
      <el-form-item label="部门负责人" prop="manager">
        <el-select v-model="detail.manager" style="width:80%" placeholder="请选择" @focus="getEmployeeSimple">
          <el-option v-for="item in employeeSimple" :key="item.id" :label="item.username" :value="item.username" />
        </el-select>
      </el-form-item>
      <el-form-item label="部门介绍" prop="introduce">
        <el-input v-model="detail.introduce" style="width:80%" placeholder="1-300个字符" type="textarea" :rows="3" />
      </el-form-item>
    </el-form>
    <!-- el-dialog有专门放置底部操作栏的 插槽  具名插槽 -->
    <el-row slot="footer" type="flex" justify="center">
      <!-- 列被分为24 -->
      <el-col :span="6">
        <el-button type="primary" size="small" @click="sumbit">确定</el-button>
        <el-button size="small" @click="delshow">取消</el-button>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
import { getEmployeeSimple } from '@/api/employees'
export default {
  // 需要传入一个props变量来控制 显示或者隐藏
  props: {
    dialogShow: {
      type: Boolean,
      default: false
    },
    children: {
      type: Array,
      default: () => [],
      require: true
    },
    // 所以列表数据
    departs: {
      type: Array,
      default: () => [],
      require: true
    },
    // 当前编辑部门的数据
    detail: {
      type: Object,
      default: () => {},
      require: true
    },
    title: {
      type: String,
      default: '',
      require: true
    }
  },
  data() {
    // 验证新增部门名称存在 这是验证当下部门的子部门
    const DepartmentName = (rules, val, callback) => {
      let isRepeat
      if (this.title === '新增部门') {
        isRepeat = this.children
          .some(item => item.name === val)
      } else {
        isRepeat = this.departs
        // 编辑时, 以 pid 作为父部门的筛选条件
          .filter(item => item.pid === this.detail.pid)
        // 跟code一样也是不能跟自己id一样, 不然就是自己, 不算重名
          .some(item => item.name === val && item.id !== this.detail.id)
      }
      if (isRepeat) {
        callback(new Error('部门名称已存在'))
      } else {
        callback()
      }
    }
    // 验证部门编码存在 这是验证全部的
    const DepartmentCode = (rules, val, callback) => {
      const isRepeat = this.departs.some(item => item.code === val && val) // 加个val不为空，因为部门可能没用编码
      if (isRepeat) {
        callback(new Error('编码已存在'))
      } else {
        callback()
      }
    }
    return {
      formData: {
        name: '', // 部门名称
        code: '', // 部门编码
        manager: '', // 部门管理者
        introduce: '', // 部门介绍
        pid: '' // 父级部门ID
      },
      rules: {
        name: [
          { required: true, message: '部门名称不能为空', trigger: 'blur' },
          { min: 1, max: 50, message: '部门名称要求1-50个字符', trigger: 'blur' },
          { validator: DepartmentName, trigger: 'blur' }
        ],
        code: [
          { required: true, message: '部门编码不能为空', trigger: 'blur' },
          { min: 1, max: 50, message: '部门编码要求1-50个字符', trigger: 'blur' },
          { validator: DepartmentCode, trigger: 'blur' }],
        manager: [
          { required: true, message: '部门负责人不能为空' }],
        introduce: [
          { required: true, message: '部门介绍不能为空', trigger: 'blur' },
          { trigger: 'blur', min: 1, max: 300, message: '部门介绍要求1-50个字符' }]
      },
      employeeSimple: []
    }
  },
  methods: {
    // 获取员工的简单列表
    async getEmployeeSimple() {
      const res = await getEmployeeSimple()
      // console.log(res)
      this.employeeSimple = res
    },
    // 校验下拉选择菜单
    checkManager() {
      // 当失去焦点的时候 利用form中的 validateField 对部分表单字段进行校验的方法
      this.$refs.deptForm.validateField('manager')
    },
    // 关闭Dialog
    delshow() {
      // this.$emit('closepop')
      // 子组件 update:固定写法 (update:props名称, 值) 可以直接修改父组件绑定了sync的属性的值
      this.$emit('update:dialogShow', false)
      this.$refs.deptForm.resetFields() // 重置校验字段
    },
    // 提交
    sumbit() {
      // 校验表单
      this.$refs.deptForm.validate(bl => {
        if (bl) {
          if (this.title === '新增部门') {
            this.$emit('sumbitForm', this.formData, bl)
          } else {
            this.$emit('sumbitForm', this.detail, bl)
          }
        }
      })
    },
    // 监听el-dialog中其close事件 取消时重置数据和校验
    btnCancel() {
      // 1. 回复表单初始值
      // 2. 清空校验
      // resetFields 方法可以清空所有表单绑定了的数据,还可以清空校验
      this.$refs.deptForm.resetFields() // 重置校验字段
      this.$emit('update:dialogShow', false)
      // console.log('111')
    },
    // Dialog的x箭头关闭
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(() => {
          done()
        })
        .catch(() => {})
    }
  }
}
</script>

<style scoped>

</style>
